<template>
  <div class="webservervideo">
      <div class="con">
          <div class="top-btn">
               <div>
                 <el-button   type="primary" @click="openfn">打开摄像头采集程序</el-button>
                 提示：新增和修改操作都需要打开摄像头采集程序
                 <!-- <el-button  class="last-el-button" type="primary" @click="offfn">关闭摄像头采集程序</el-button> -->
               </div>
               <el-button  class="last-el-button" @click="addfn" type="primary">新增</el-button>
          </div>
          <div class="mytable">
            <el-table :data="tableData" height="100%" stripe  style="width: 100%;" >
                                            <el-table-column type="index" width="90" align="center" label="序号"> </el-table-column>
                                            <el-table-column prop="camera_name"   label="视频名称"> </el-table-column>
                                            <el-table-column prop="address"  width="180" label="IP地址"> </el-table-column>
                                            <el-table-column prop="port" width="180" label="端口"> </el-table-column>
                                            <el-table-column prop="userName" width="180" label="登录名"> </el-table-column>
                                            <el-table-column  width="180" label="操作" fixed="right" align="center"> 
                                                <template #default="{row}">
                                                        <div class="mysort">
                                                            <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                                                                <img src="../assets/btnImg/edit2.png" alt="" style="margin-right:26px" @click="editfn(row)">
                                                            </el-tooltip>
                                                            <el-tooltip class="item" effect="dark" content="删除" placement="top">
                                                            <img src="../assets/btnImg/del2.png" alt="" @click="delFN(row)">
                                                            </el-tooltip> 
                                                        </div>
                                                    </template>
                                            </el-table-column>
            </el-table>
          </div>
<div class="el-loading-mask" v-show="isMask">
                                    <div class="el-loading-spinner">
                                    <svg viewBox="25 25 50 50" class="circular">
                                        <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
                                    </svg>
                           </div>
                     </div>
      </div>
      
      <el-dialog width="800px" draggable  :title="caozuoType" :close-on-click-modal='false' v-model="addeditflagline">
                    <div class="choicedio">
                         <div class="infoitems">
                             <div class="items itemright">
                                <div class="leftname"><span>*</span> 视频名称：</div>
                                 <el-input v-model="temp.camera_name" placeholder="请输入视频名称"></el-input>
                            </div>
                             <div class="items">
                                <div class="leftname"></div>
                                 
                            </div>
                            
                         </div>
                         <div class="infoitems">
                             <div class="items itemright">
                                <div class="leftname"><span>*</span> IP地址：</div>
                                 <el-input v-model="temp.address" placeholder="请输入IP地址"></el-input>
                            </div>
                           <div class="items">
                                <div class="leftname"><span>*</span> 端口号：</div>
                                 <el-input v-model="temp.port" placeholder="请输入端口号"></el-input>
                            </div>
                         </div>
                         <div class="infoitems">
                             <div class="items itemright">
                                <div class="leftname"><span>*</span> 登录名：</div>
                                 <el-input v-model="temp.userName" placeholder="请输入登录名"></el-input>
                            </div>
                            <div class="items">
                                <div class="leftname"><span>*</span> 密码：</div>
                                 <el-input v-model="temp.password" placeholder="请输入密码" show-password></el-input>
                                
                            </div>
                         </div>
                    </div>
                    <div class="el-loading-mask" v-show="diaisMask">
                                    <div class="el-loading-spinner">
                                    <svg viewBox="25 25 50 50" class="circular">
                                        <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
                                    </svg>
                           </div>
                     </div>
                     <template #footer>
                                 <div class="dialog-footer">
                                  <el-button  @click="addeditflagline = false" >取 消</el-button>
                            <el-button  class="last-el-button" @click="addpassageway" type="primary">确 定</el-button>
                                 </div>
                    </template>
                   
                      
                    
      </el-dialog>
  </div>
</template>

<script>
import {getCameraList,saveCameraList,editCameraList,delCameraList,opencameraconfig,offcameraconfig} from "../api/Interface";
export default {


  data() {
    return {
      tableData:[],
      addeditflagline:false,
      diaisMask:false,
      isMask:false,
      temp:{
        "camera_name":"",
        "camera_number":"",
        "address":"",
        "port":"",
        "userName":"",
        "password":"",
      },
      caozuoType:"新增"
    };
  },

  mounted() {
     this.getCameraListfn()
  },

  methods: {
    //打开采集
    openfn(){
        this.isMask = true
        opencameraconfig().then(res => {
            this.isMask = false
             if(res.code == 200){
                  this.$message({showClose: true,message: '操作成功',type: 'success'});
             }else {
                  this.$message.error('操作失败！！')
             }
        }).catch(() => {
               this.$message.error('操作失败！！')
        })
    },
    offfn(){
         this.isMask = true
        offcameraconfig().then(res => {
            this.isMask = false
             if(res != undefined){
                  this.$message({showClose: true,message: '操作成功',type: 'success'});
             }else {
                  this.$message.error('操作失败！！')
             }
        }).catch(() => {
               this.$message.error('操作失败！！')
        })
    },
    //获取摄像头
      getCameraListfn(){
        this.isMask = true
        getCameraList().then(res => {
            this.isMask = false
            // console.log("摄像头",res);
            if(res != undefined){
                //  this.tableData = res
                 var RESDATA = res
                 var usernameArr = []//登录名
                 var passArr = []//密码
                 RESDATA.forEach(item => {
                      usernameArr = (item.camera_address.split('//'))[1].split(':')
                      item.userName = usernameArr[0]
                      passArr = (usernameArr)[1].split('@')
                      item.password = passArr[0]
                      item.address = passArr[1]
                      item.port = usernameArr[2]
                 })
                 this.tableData = RESDATA
            }
        })
      },
      //新增摄像头
      addfn(){
           this.caozuoType = '新增'
           this.temp = {
                "camera_name":"",
                "camera_number":"",
                "address":"",
                "port":"554",
                "userName":"admin",
                "password":"",
            }
           this.addeditflagline = true
      },
      //确定新增修改
      addpassageway(){
         if(this.temp.camera_name === ""){
             this.$message({showClose: true,message: '视频名称不能为空',type: 'warning'});
             return
         }
         if(this.temp.address === ""){
             this.$message({showClose: true,message: 'IP地址不能为空',type: 'warning'});
             return
         }
         if(this.temp.userName === ""){
             this.$message({showClose: true,message: '用户名不能为空',type: 'warning'});
             return
         }
         if(this.temp.password === ""){
             this.$message({showClose: true,message: '密码不能为空',type: 'warning'});
             return
         }
          var dd = {
            'camera_name':this.temp.camera_name,
            'id':Number(this.temp.id),
            'camera_address':`rtsp://${this.temp.userName}:${this.temp.password}@${this.temp.address}:${this.temp.port}`,
          }
          // console.log("参数",dd);
          this.diaisMask = true
          if(this.caozuoType == '新增'){
            saveCameraList(dd).then(res => {
              // console.log("新增",res);
              this.diaisMask = false
                if(res.code == 200){
                    this.getCameraListfn()
                    this.addeditflagline = false
                    this.$message({showClose: true,message: '新增成功',type: 'success'});
                }else {
                    this.$message.error(res != undefined ? res : '新增失败')
                }
            })
          }else {
             editCameraList(dd).then(res => {
              // console.log("修改",res);
              this.diaisMask = false
                if(res.code == 200){
                    this.getCameraListfn()
                     this.addeditflagline = false
                    this.$message({showClose: true,message: '修改成功',type: 'success'});
                }else {
                    this.$message.error(res != undefined ? res : '修改失败')
                }
            })
          }
          
      },
      //修改
      editfn(row){
        this.caozuoType = '修改'
        this.temp = row
        this.addeditflagline = true
      },
      //删除
      delFN(row){
        this.$confirm(`是否要删除此项？`,'提示',{
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
                this.isMask = true
               delCameraList({'id':row.id}).then(res => {
                this.isMask = false
                  if(res.code == 200){
                     this.$message({showClose: true,message: '删除成功',type: 'success'});
                    this.getCameraListfn()
                  }else {
                      this.$message.error('删除失败！！')
                  }
               }).catch(error => {
                    this.$message.error('删除失败！！')
               })    
            }).catch(() => {
              // ...
            });
          
      },
  },
};
</script>
<style lang="scss" scoped>
    .webservervideo {
        width: 100%;
        height: 100%;
        .con {
            width: 100%;
            height: 100%;
            background-color: #fff;
            padding: 12px;
            box-sizing: border-box;
            position: relative;
            .top-btn {
                 display: flex;
                 align-items: center;
                 justify-content: space-between;
                 margin-bottom: 12px;
            }
            .mytable {
                 width: 100%;
                 height: calc(100% - 50px);
            }
        
        }
    }
</style>